<template>
  <div class="menu" ref="menuRef">
    <div class="menu-item" v-for="item in list" :key="item.name">
      <div
        class="menu-item-wrap"
        @click="onClickMenu(item)"
        :class="{ active: currentMenuId === item.id }"
      >
        <div class="menu-item-name">
          <el-icon
            :size="32"
            :color="currentMenuId === item.id ? '#ffffff' : '#0179cb'"
          >
            <component :is="item.icon"></component>
          </el-icon>
          <div>{{ item.name }}</div>
        </div>
        <div v-if="item.children">
          <i v-if="nocollapse.includes(item.id)" class="el-icon-arrow-down"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div
        class="submenu-wrap"
        v-if="item.children && nocollapse.includes(item.id)"
      >
        <div
          class="menu-item"
          v-for="subitem in item.children"
          :key="subitem.name"
        >
          <div
            class="menu-item-wrap"
            :class="{ active: currentMenuId === subitem.id }"
            @click="onClickMenu(subitem)"
          >
            <div class="menu-item-name">
              <el-icon
                :size="32"
                :color="currentMenuId === subitem.id ? '#ffffff' : '#0179cb'"
              >
                <component :is="subitem.icon"></component>
              </el-icon>
              <div>{{ subitem.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted } from "vue";
import {
  FolderOpened,
  DataLine,
  Search,
  CircleCheck,
  Document,
} from "@element-plus/icons";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "",
  components: {
    FolderOpened,
    DataLine,
    Search,
    CircleCheck,
    Document,
  },
  setup() {
    const router = useRouter();
    const list: any = ref([
      {
        id: "1",
        name: "资源目录",
        icon: "folder-opened",
        children: [
          {
            id: "2",
            name: "标准目录",
            icon: "folder-opened",
            path: "/basic",
          },
          {
            id: "3",
            name: "专题目录",
            icon: "document",
            path: "/basic",
          },
          {
            id: "4",
            name: "已选图层",
            icon: "circle-check",
            path: "/basic",
          },
          {
            id: "5",
            name: "我的收藏",
            icon: "folder-opened",
            path: "/basic",
          },
        ],
      },
      {
        id: "6",
        name: "信息查询",
        icon: "search",
        children: [
          {
            id: "6-1",
            name: "在线查询",
            icon: "folder-opened",
            path: "/online_query",
          },
          {
            id: "6-2",
            name: "地名地址",
            icon: "document",
            path: "/toponymy_location",
          },
          {
            id: "6-3",
            name: "项目查询",
            icon: "document",
            path: "/project_query",
          },
        ],
      },
      {
        id: "7",
        name: "应用分析",
        icon: "data-line",
        children: [
          {
            id: "8",
            name: "压占分析",
            icon: "folder-opened",
            path: "/analysis",
          },
          {
            id: "9",
            name: "辅助选址",
            icon: "document",
            path: "/location",
          },
          {
            id: "10",
            name: "合规审查",
            icon: "circle-check",
            path: "/audit",
          },
        ],
      },
    ]);

    const currentMenuId = ref("2");
    const nocollapse = ref(["1"]);
    const currentPath = ref("");
    let store = useStore();

    const menuRef = ref();

    const synchronizedWidth = () => {
      let currentMenuWidth = window.getComputedStyle(menuRef.value).width;
      store.dispatch("menu/changeMenuWidth", currentMenuWidth);
    };

    onMounted(() => {
      synchronizedWidth();
    });

    const onClickMenu = (item: { children: any; id: string; path: string }) => {
      synchronizedWidth();

      if (!item.children) {
        store.commit("menu/menuChange", item.id);
        currentMenuId.value = item.id;
        router.push(item.path);
      } else {
        const index = nocollapse.value.indexOf(item.id);
        if (index > -1) {
          nocollapse.value.splice(index, 1);
        } else {
          nocollapse.value.push(item.id);
        }
      }
    };

    return {
      list,
      menuRef,
      currentMenuId,
      nocollapse,
      onClickMenu,
      currentPath,
    };
  },
});
</script>

<style lang="less" scoped>
.menu {
  line-height: normal;
  height: 100%;
  border-right: 1px solid #efefef;

  .menu-item {
    text-align: center;
  }

  .menu-item-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;

    &:hover {
      background: #efefef;
    }

    &.active {
      background: #0179cb;
      color: #fff;
    }
  }

  .menu-item-name {
    flex: 1;
  }

  .submenu-wrap {
    .menu-item-wrap {
      padding-left: 10px;
    }
  }
}
</style>
